<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		var cfg = {
				chart: {
					type: 'waterfall'
				},
				title: {
					text: 'Waterfall Chart'
				},
				xAxis: {
					type: 'catagory'
				},
				yAxis: {
					title: {
						text: 'USD'
					}
				},
				tooltip: {
					formatter: function() {
						return '<b>' + this.y + '</b>' + ' USD';
					}
				},
				series: [{
					upColor:"#FF8080",
					color:"#8080FF",
		            data: [{
		                name: 'Start',
		                y: 120000
		            }, {
		                name: 'Product Revenue',
		                y: 569000
		            }, {
		                name: 'Service Revenue',
		                y: 231000
		            }, {
		                name: 'Positive Balance',
		                isIntermediateSum: true,
		                color:"#80FF80"
		            }, {
		                name: 'Fixed Costs',
		                y: -342000
		            }, {
		                name: 'Variable Costs',
		                y: -233000
		            }, {
		                name: 'Balance',
		                isSum: true,
		            }],
		            dataLabels: {
		                enabled: true,
		                formatter: function () {
		                	return (this.y / 1000) + 'k';
		                },
		                style: {
		                    color: '#FFFFFF',
		                    fontWeight: 'bold',
		                    textShadow: '0px 0px 3px black'
		                }
		            },
		            pointPadding: 0
		        }]
		};
		
		myChart.SetOptions(cfg);

		myChart.Draw();
	});
</script>
<title>Waterfall 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>
	<div id="title">Waterfall 예제</div>
	<div id="desc">
		증가/감소 되는 데이터의 흐름을 볼 수 있게 Waterfall 형식으로 차트에 그린다.
	</div>

	<div id="functionArea">
		chart: {<br>
	    &nbsp;&nbsp;&nbsp;&nbsp;Type : "<font color="#FF0000">waterfall</font>",<br>
	    }<br>
	    .<br>
	    .<br>
        <br>
        series: [{<br>
		&nbsp;&nbsp;&nbsp;&nbsp;upColor:"#FF8080",<br>
		&nbsp;&nbsp;&nbsp;&nbsp;color:"#8080FF"<br>
		&nbsp;&nbsp;&nbsp;&nbsp;.<br>
	    &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        }]
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "400px");
		</script>
	</div>
</div>
</body>
</html>